import React, { useState, useRef } from 'react';
import { Modal, Button, Descriptions, message } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { SorterResult } from 'antd/es/table/interface';
import { PlusOutlined } from '@ant-design/icons';
import { marketGoods, addMarketGoods } from '../service';
import SelectGoods from '@/components/SelectGoods'
import { STATUS_ENMU } from '@/common/constants';

interface DetailModalProps {
  visible: boolean;
  record: any,
  onCancel: () => void;
}
const columns: ProColumns<any>[] = [
  {
    title: '商品名称',
    dataIndex: 'name',
  },
  {
    title: '图片',
    dataIndex: 'main_pic',
    render: (val) => val && <img alt="商品图片" src={val} style={{ width: 50, height: 50 }} />,
  },
  // {
  //   title: '是否上架',
  //   dataIndex: 'online',
  //   render: (v) => (v === 1 ? '是' : '否'),
  // }
];


const CreateForm: React.FC<DetailModalProps> = (props) => {
  const { visible, onCancel, record } = props;
  const [selectGoodsVisible, setSelectGoodsVisible] = useState(false);
  const [list, setList] = useState([]);
  const ref = useRef<ActionType>();
  return (
    <Modal
      destroyOnClose
      title="营销分类管理"
      width={1000}
      visible={visible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Descriptions title='分类信息' bordered size='small'>
        <Descriptions.Item label="类目标号">{record.id}</Descriptions.Item>
        <Descriptions.Item label="分类名称">{record.name}</Descriptions.Item>
        <Descriptions.Item label="状态">{STATUS_ENMU[record.status]}</Descriptions.Item>
      </Descriptions>

      <ProTable<any>
        headerTitle="商品列表"
        actionRef={ref}
        rowKey="id"
        search={false}
        onChange={(_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<any>;
          if (sorterResult.field) {
            setSorter(`${sorterResult.field}_${sorterResult.order}`);
          }
        }}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            type="primary"
            onClick={() => {
              setSelectGoodsVisible(true)
            }}
          >
            <PlusOutlined /> 新增商品
          </Button>,
        ]}
        request={async () => {
          const { data } = await marketGoods(record.id);
          const { Goods } = data;
          data.data = Goods;
          setList(Goods);
          return data;
        }}
        columns={columns}
      />
      {
        selectGoodsVisible &&
        <SelectGoods
          onCancel={() => setSelectGoodsVisible(false)}
          goodsIds={list.map(it => it.id)}
          onOk={async (goods) => {
            const { code } = await addMarketGoods({
              marketId: record.id,
              goods
            });
            if (code === 0) {
              ref.current.reload();
              message.success('绑定成功');
              setSelectGoodsVisible(false);
            }
          }}
        />
      }
    </Modal>
  );
};

export default CreateForm;
